<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<u-swiper @change="changeindex" :list="list2" keyName="image" showTitle height="320" :autoplay="false" circular></u-swiper>
	<view class="hexiao-card bg-white px-[20rpx] py-[32rpx]">
		<view class="news-card-content">
			<view class="news-card-content-title text-base">{{ list2[index].title }}</view>
			<view class="news-detail-section bg-white p-[24rpx]">
				<!-- 内容 -->
				<view class="mt-[20rpx]">
					<u-parse :html="list2[index].content"></u-parse>
				</view>
			</view>
		</view>
	</view>
	
	<view class="text-base text-black px-[20rpx] py-[32rpx]">我的权益：</view>
	
	<view class="hexiao-card bg-white px-[20rpx] py-[32rpx]" v-for="(item, index) in itemsdata" :key="index">
		<view class="news-card-content">
			<view class="news-card-content-title text-base">{{ item.title }}</view>
			<view class="news-card-content-intro text-gray-400 text-sm mt-[16rpx]">
				{{ item.content }}
			</view>
			<view class="text-muted text-xs w-full flex justify-between mt-[16rpx]">剩余次数：{{ item.shengyu }}</view>
			<view class="text-muted text-xs w-full flex justify-between mt-[16rpx]">使用次数：{{ item.shiyong_num }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getVips } from '@/api/app';
const itemsdata = ref<any>([]);
const index = ref<any>(0);
const list2 = ref<any>([]);

const changeindex = async (e) => {
	index.value = e;
	console.log(index.value);
};
const getData = async () => {
	list2.value = await getVips();
	// console.log(list2)
};
getData();
onLoad((options: any) => {
	itemsdata.value = JSON.parse(decodeURIComponent(options.item));
});
</script>

<style lang="scss">
.hexiao-card {
	border-bottom: 1px solid #f8f8f8;
}
</style>